<template>
  <el-dialog
    title="删除角色"
    :visible.sync="dlg"
    width="550px"
    custom-class="dialog-style"
  >
    <span> 确定要删除角色 {{ role.name }} 吗 ？</span>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="!saving" @click="dlg=false">取 消</el-button>
      <el-button type="primary" :loading="saving" @click="handleDelete">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { createAccount } from '@/svc/account'

export default {
  name: 'DeleteRole',
  props: {
    fnDelete: { type: Function, required: true }
  },
  data() {
    return {
      dlg: false,
      saving: false,
      role: {
        id: '',
        name: ''
      }
    }
  },
  methods: {
    show(role) {
      this.role = role
      this.dlg = true
    },
    handleDelete() {
      this.saving = true
      this.fnDelete(this, this.role).then(res => {
        this.saving = false
        this.$emit('delete', this.role)
        this.dlg = false
        this.$success('删除成功')
      }).catch(() => {
        this.saving = false
      })
    }
  }
}
</script>
